<template>
    <template ref="headerRef">
        <!-- <HeaderRefComponent @searchHandle="searchList" :schools="schools" :storeId="params.schoolId"/> -->
    </template>
    <div class="wrong-question">
        <div class="wrong-question-main">
            <div class="wrong-question-list">
                <ContentComponents ref="contentRef"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import {ref, Ref, watch, onMounted} from 'vue'
    import $ from '$';
    import ContentComponents from './components/content.vue'
    import HeaderRefComponent from './components/header-ref.vue'

    export default {
        components: {ContentComponents, HeaderRefComponent},
        setup() {

            let params: Ref<any> = ref({
                schoolId: '',
            });

            let schools = ref([]);


            let headerRef: Ref<any> = ref();
            let contentRef: Ref<any> = ref();

            const searchList = (val) => {
                params.value = {...params.value,...val}
                contentRef.value.getStudentList(params.value.schoolId);
            }

            onMounted(async () => {
                // $.emitter.emit('slot', headerRef);
                // let res: any = await $.http.post('/admin/school/queryPage?size=10000&current=1', {});
                // schools.value =res.records;
                // params.value.schoolId = res.records[0].id;
                contentRef.value.getStudentList("111");
            });
            return {
                schools, headerRef, contentRef, params,searchList
            }
        }
    }
</script>
<style lang="scss" scoped>
    .wrong-question {
        background: #fff;
        border-radius: 8px;
        height: 100%;
        // & > div {
        //   height: 100%;
        // }
        .wrong-question-tab {
            ul {
                height: 40px;
                border-bottom: 1px solid #DEE4F1;
                display: flex;
                width: 1080px;

                li {
                    width: 120px;
                    height: 40px;
                    padding: 0 10px;
                    text-align: center;
                    line-height: 40px;
                    font-family: #333333;
                    font-size: 16px;
                    cursor: pointer;
                }
            }
        }

        .wrong-question-main {
            height: calc(100% - 40px);

            & > div {
                height: 100%;
                overflow: auto;
            }
        }

        .is_active {
            padding: 8px 14px;
            content: attr(data-index);
            border-bottom: 5px solid #72b22a;
            border-radius: 3px;
            color: #72b22a;
        }
    }
</style>
